<template>
  <div class="app-container">
    <Find :OriginalFilter="{ static: true }" :formList="formList" @findClicked="findClicked" />
    <Find :OriginalFilter="{ static: true }" :formList="formList2" :searchImg="false" @findClicked="findClicked2" />
    <div class="mt10" style="width: 100%; background-color: white">
      <el-card shadow="never" class="table1" :body-style="{ padding: '5px 10px 5px' }">
        <div slot="header" class="f16">
          <span style="font-weight: 600">选择材料出库明细</span>
        </div>
        <Table
          :tableHeader="tableHeader"
          :tableData="tableData"
          class="mt10"
          :isLoading="isLoading"
          :TableHeight="50"
          :outTableHeight="110"
          @currentRow="currentRow"
          @selectListShow="selectListShow"
          @filterMethod="filterMethod"
        />
      </el-card>
      <el-card shadow="never" :body-style="{ padding: '5px 10px 5px' }">
        <div slot="header" class="f16">
          <span style="font-weight: 600">材料其他出库明细</span>
        </div>
        <Table
          :tableHeader="tableHeader2"
          :tableData="tableData2"
          :isLoading="isLoading2"
          :TableHeight="50"
          :outTableHeight="110"
          @currentRow="currentRow2"
        />
      </el-card>
      <el-card shadow="never" :body-style="{ padding: '5px' }">
        <PageModule :PageData="{ total: total2, buttonS: true }" @pageSizeChange="handleSizeChange2" @pageChange="handleCurrentChange2" />
      </el-card>
    </div>

    <!-- 订单屏蔽 -->
    <el-drawer v-model="dialogTableVisible" :direction="'ttb'" size="small" :with-header="false">
      <div class="flex mt30 ml45">
        <div class="ml45">
          <Find :OriginalFilter="{ static: true }" :formList="formList3" @findClicked="findClicked3" />
          <el-card shadow="never" :body-style="{ padding: '15px 10px 5px' }">
            <div slot="header" class="f16">
              <span style="font-weight: 600">材料查询</span>
            </div>
            <Table :tableHeader="tableHeader3" :tableData="tableData3" selection class="mt10" :isLoading="isLoading3" @selectList="selectList3" />
          </el-card>
          <el-card shadow="never" :body-style="{ padding: '5px' }">
            <PageModule :PageData="{ total: total3, buttonS: true }" @pageSizeChange="handleSizeChange3" @pageChange="handleCurrentChange3" />
          </el-card>
        </div>
      </div>
    </el-drawer>
  </div>
</template>
<script lang="ts">
import { defineComponent, onBeforeUnmount, onMounted, ref, watch } from 'vue'
import Find from '@/components/Find/index.vue'
import LoginWork from '@/utils/LoginWork'
import service from '@/utils/request'
import { ElMessage } from 'element-plus'
import { debounce } from 'lodash'
import JMessage from '@/utils/JMessage'
export default defineComponent({
  name: 'OtherOutbound'
})
</script>
<script lang="ts" setup>
import { i18n, Jzhcn } from '@/i18n'
const dialogTableVisible = ref(false)
const data = ref<any>([])
const defaultProps = {
  children: 'children',
  label: 'typeName'
}
interface Tree {
  children?: Tree[]
  levelCode: string
  oldLevel: string
  parentLevel: string
  typeName: string
  typeNo: string
}
// 分类名称
const DepartmentName = ref<string>('')
// 判断下拉框是否禁用
const disabledDepartment = ref(true)
const handleNodeClick = async (data: Tree) => {
  let { typeName, typeNo, levelCode, parentLevel } = data
  if (parentLevel !== null && parentLevel.length === 2) {
    disabledDepartment.value = false
  } else {
    disabledDepartment.value = true
  }
  DepartmentName.value = typeName
}
//获取所有部门资料
onMounted(() => {
  DepartmentalData()
})
const DepartmentalData = async () => {
  let resolve = await service.get('/MaterialManagement/getAssortList')
  data.value = resolve
}

const formList = ref([
  {
    type: 'button',
    checkboxLabel: '选择材料 >>'
  },
  {
    type: 'select',
    selectValue: '备料出库',
    selectP: '出库原因',
    selectLabel: '仓库',
    selectOptions: [
      {
        optionKey: '1',
        optionValue: '盘亏调整',
        optionLabel: '盘亏调整'
      },
      {
        optionKey: '2',
        optionValue: '备料出库',
        optionLabel: '备料出库'
      },
      {
        optionKey: '3',
        optionValue: '剩料出库',
        optionLabel: '剩料出库'
      },
      {
        optionKey: '4',
        optionValue: '加工出库',
        optionLabel: '加工出库'
      },
      {
        optionKey: '5',
        optionValue: '高频出库',
        optionLabel: '高频出库'
      }
    ]
  },
  {
    type: 'select',
    selectValue: '在制仓',
    selectP: '仓库',
    selectLabel: '出库原因',
    selectOptions: [
      {
        optionKey: '1',
        optionValue: '在制仓',
        optionLabel: '在制仓'
      },
      {
        optionKey: '2',
        optionValue: '剩料仓',
        optionLabel: '剩料仓'
      }
    ]
  },
  {
    type: 'button',
    checkboxLabel: '生成其他出库单据'
  }
])
const formList2 = ref([
  {
    type: 'input',
    inputPlaceholder: '请输入指令',
    inputValue: ''
  },
  {
    type: 'input',
    inputPlaceholder: '请输入材料',
    inputValue: ''
  },
  {
    type: 'input',
    inputPlaceholder: '请输入颜色',
    inputValue: ''
  },
  {
    type: 'date',
    dateLabel: '出库日期',
    dateValue: ''
  },
  {
    type: 'select',
    selectValue: '',
    selectP: '出库原因',
    selectLabel: '',
    selectOptions: [
      {
        optionKey: '1',
        optionValue: '盘亏调整',
        optionLabel: '盘亏调整'
      },
      {
        optionKey: '2',
        optionValue: '备料出库',
        optionLabel: '备料出库'
      },
      {
        optionKey: '3',
        optionValue: '剩料出库',
        optionLabel: '剩料出库'
      },
      {
        optionKey: '4',
        optionValue: '加工出库',
        optionLabel: '加工出库'
      },
      {
        optionKey: '5',
        optionValue: '高频出库',
        optionLabel: '高频出库'
      }
    ]
  },
  {
    type: 'button',
    checkboxLabel: '置空',
    bgColor: '#1890FF'
  },
  {
    type: 'button',
    checkboxLabel: '删除出库单'
  }
])
const formList3 = ref([
  {
    type: 'input',
    inputPlaceholder: '请输入名称1',
    inputValue: ''
  },
  {
    type: 'input',
    inputPlaceholder: '请输入名称2',
    inputValue: ''
  },
  {
    type: 'input',
    inputPlaceholder: '请输入名称3',
    inputValue: ''
  },
  {
    type: 'input',
    inputPlaceholder: '请输入颜色',
    inputValue: ''
  },
  {
    type: 'input',
    inputPlaceholder: '请输入规格',
    inputValue: ''
  },
  {
    type: 'input',
    inputPlaceholder: '请输入单位',
    inputValue: ''
  },
  {
    type: 'button',
    checkboxLabel: '返回'
  },
  {
    type: 'button',
    checkboxLabel: '插入'
  },
  {
    type: 'button',
    checkboxLabel: '库存 > 0'
  }
])
const tableHeader = ref([
  {
    change: true,
    label: '指令号',
    type: 'select',
    prop: 'lotNo',
    width: 150
  },
  {
    change: true,
    label: '分类名称',
    prop: 'typeName'
  },
  {
    label: '物料编码',
    prop: 'mtlNo',
    width: '180px'
  },
  {
    label: '材料颜色',
    prop: 'mtlColor',
    width: '127px'
  },
  {
    label: '材料名称',
    prop: 'mtlName',
    width: '350px'
  },
  {
    label: '规格',
    prop: 'mtlSpec',
    width: '58px'
  },
  {
    label: '单位',
    prop: 'mtlUnit',
    width: '108px'
  },
  {
    change: true,
    label: '库存位置',
    prop: 'areaNo',
    width: '140px'
  },
  {
    change: true,
    label: '位置序号',
    prop: 'seqNo',
    width: '90px'
  },
  {
    change: true,
    label: '库存数量',
    prop: 'qty',
    width: '90px'
  },
  {
    label: '出库数量',
    prop: 'outQty',
    width: '90px'
  },
  {
    label: '出库日期',
    type: 'dateSingle',
    prop: 'slipDate',
    width: '140px'
  },
  {
    label: '备注',
    prop: 'remark'
  }
])

const tableHeader2 = ref([
  {
    label: '指令号',
    prop: 'lotNo',
    width: '170px'
  },
  {
    label: '出库单号',
    prop: 'slipNo',
    width: '115px'
  },
  {
    label: '出库日期',
    prop: 'slipDate',
    width: '107px'
  },
  {
    label: '出库原因',
    prop: 'slipReason'
  },
  {
    label: '料号',
    prop: 'mtlNo',
    width: '150px'
  },
  {
    label: '颜色',
    prop: 'mtlColor',
    width: '70px'
  },
  {
    label: '材质',
    prop: 'mtlName',
    width: '237px'
  },
  {
    label: '规格',
    prop: 'mtlSpec',
    width: '70px'
  },
  {
    label: '单位',
    prop: 'mtlUnit',
    width: '70px'
  },
  {
    label: '出库数量',
    prop: 'outQty',
    width: '70px'
  },
  {
    label: '仓库',
    prop: 'warehouseNo',
    width: '70px'
  },
  {
    label: '库存位置',
    prop: 'areaNo',
    width: '150px'
  },
  {
    label: '位置序号',
    prop: 'seqNo',
    width: '70px'
  },
  {
    label: '备注',
    prop: 'remark'
  }
])
const tableHeader3 = ref([
  {
    label: '物料编码',
    prop: 'mtlNo'
  },
  {
    label: '材料名称',
    prop: 'mtlName',
    width: 400
  },
  {
    label: '规格',
    prop: 'mtlSpec'
  },
  {
    label: '单位',
    prop: 'mtlUnit'
  },
  {
    label: '库存量',
    prop: 'stkQty'
  }
])
// 表一模块
// 表一按钮
const findClicked = async (content: string) => {
  if (content === '置空') {
    formList.value.forEach((item: any) => {
      item.inputValue = ''
      item.selectValue = ''
      item.dateValue = ''
    })
  }
  if (content === '选择材料 >>') {
    dialogTableVisible.value = true
  }
  if (content === '生成其他出库单据') {
    const copyTableData = JSON.parse(JSON.stringify(tableData.value))
    if (!table1CurrentRow.value) return JMessage.warning('请选择要出库的材料')
    const rgx = copyTableData.some((item: any) => item.lotNo.selectValue.includes(' '))
    if (rgx) return JMessage.warning('指令号不能为空')
    table1CurrentRow.value[0].lotNo = table1CurrentRow.value[0].lotNo.selectValue
    const res = await LoginWork.post<any, any>('/stock/out/creOtherMtlSlip', {
      list: copyTableData.map((item: any) => {
        item.lotNo = item.lotNo.selectValue
        return item
      }),
      slipReason: formList.value[1].selectValue,
      warehouseNo: formList.value[2].selectValue
    })
    if (res.code === 200) {
      JMessage.success('生成其他出库单据成功')
      getTableList()
      getTableList2()
      getTableList3()
    } else {
      JMessage.warning(res.message)
    }
  }
}
const tableData = ref<any>([])
const isLoading = ref(true)
const table1CurrentRow = ref()
const currentRow = (row: any) => {
  table1CurrentRow.value = [{ ...row }]
}
// 分页
const lotTotal = ref(0)
const lotPageSize = ref(40)
const lotCurrentPage = ref(1)
// 搜索的变量
const lotNoInp = ref('')
// 获取表数据
const getTableList = debounce(async () => {
  isLoading.value = true
  tableData.value = await service.get<any, any>('/stock/out/otherMtlDetailList')
  isLoading.value = false
  tableData.value = tableData.value.map((item: any) => {
    item.change = 'Y'
    item.disableConfirm = true
    // 修改表格中下拉框数据（获取表格数据函数）
    item.lotNo = {
      PageModule: true,
      total: lotTotal.value,
      selectValue: item.lotNo || ' ',
      options: [],
      handleSizeChange: (val: number) => {
        lotPageSize.value = val
        getLotNoList(item)
      },
      handleCurrentChange: (val: number) => {
        lotCurrentPage.value = val
        getLotNoList(item)
      }
    }
    // getSelectList4(item)
    return item
  })
}, 500)
onMounted(() => {
  getTableList()
})
watch(
  () =>
    formList.value.map((item: any) => {
      item.selectValue, item.inputValue, item.dateValue, item.checked
    }),
  () => {
    getTableList()
  }
)
// 获取表格中下拉框数据
// 获取指令号下拉框数据
const getLotNoList = async (row: any) => {
  row.lotNo.options.splice(0)
  const res = await service.get<any, any>('/back/getLots', {
    params: {
      lot: lotNoInp.value,
      pageSize: lotPageSize.value,
      pageNum: lotCurrentPage.value
    }
  })
  lotTotal.value = res.total
  row.lotNo.total = res.total
  res.list.map((Vendor: any) => {
    row.lotNo.options.push({
      label: Vendor,
      value: Vendor //中间空两个
    })
  })
}
const selectListShow = (row: any, visible: boolean) => {
  if (visible === true) {
    getLotNoList(row)
  } else {
    row.lotNo.options = []
  }
}
const filterMethod = (inputVal: string, row: any) => {
  lotNoInp.value = inputVal
  getLotNoList(row)
}

// 表二模块
// 表二按钮
const findClicked2 = async (content: string) => {
  if (content === '置空') {
    formList2.value.forEach((item: any) => {
      item.inputValue = ''
      item.selectValue = ''
      item.dateValue = ''
    })
  }
  if (content === '删除出库单') {
    try {
      await service.post('/stock/out/deleteByOtherDetail', table2currentRow.value)
      JMessage.success('删除成功')
      getTableList2()
    } catch (error) {
      JMessage.warning('删除失败')
    }
  }
}
const tableData2 = ref([])
const isLoading2 = ref(true)
// 分页器
const currentPage2 = ref(1)
const pageSize2 = ref(40)
const total2 = ref(0)
const handleSizeChange2 = (val: number) => {
  pageSize2.value = val
  getTableList2()
}
const handleCurrentChange2 = (val: number) => {
  currentPage2.value = val
  getTableList2()
}
// 获取表数据
const getTableList2 = debounce(async () => {
  isLoading2.value = true
  let tableDataList = await service.post<any, any>('/stock/out/otherDetails', {
    lotNo: formList2.value.find(
      (item: any) => item.inputPlaceholder && Jzhcn.Find[item.inputPlaceholder.split('.')[1] as keyof typeof Jzhcn.Find] === '请输入指令'
    )?.inputValue,
    mtlColor: formList2.value.find(
      (item: any) => item.inputPlaceholder && Jzhcn.Find[item.inputPlaceholder.split('.')[1] as keyof typeof Jzhcn.Find] === '请输入颜色'
    )?.inputValue,
    mtlName: formList2.value.find(
      (item: any) => item.inputPlaceholder && Jzhcn.Find[item.inputPlaceholder.split('.')[1] as keyof typeof Jzhcn.Find] === '请输入材料'
    )?.inputValue,
    slipEndDate: formList2.value.find(
      (item: any) => item.dateLabel && Jzhcn.Find[item.dateLabel.split('.')[1] as keyof typeof Jzhcn.Find] === '出库日期'
    )?.dateValue?.[1],
    slipReason: formList2.value.find((item: any) => item.selectP && Jzhcn.Find[item.selectP.split('.')[1] as keyof typeof Jzhcn.Find] === '出库原因')
      ?.selectValue,
    slipStartDate: formList2.value.find(
      (item: any) => item.dateLabel && Jzhcn.Find[item.dateLabel.split('.')[1] as keyof typeof Jzhcn.Find] === '出库日期'
    )?.dateValue?.[0],
    pageNum: currentPage2.value,
    pageSize: pageSize2.value
  })
  isLoading2.value = false
  tableData2.value = tableDataList.list
  total2.value = tableDataList.total
}, 500)
onMounted(() => {
  getTableList2()
})
watch(formList2.value, () => {
  getTableList2()
})
const table2currentRow = ref()
const currentRow2 = async (row: any) => {
  table2currentRow.value = row
}

// 表三模块
// 选择表格数据
const selectTable3List = ref()
const selectList3 = (list: any) => {
  selectTable3List.value = JSON.parse(JSON.stringify(list))
}
// 表三按钮
const findClicked3 = async (content: string) => {
  if (content === '返回') {
    dialogTableVisible.value = false
  }
  if (content === '插入') {
    if (selectTable3List.value.length === 0) {
      JMessage.warning('请打勾材料')
      return
    }
    let res = await LoginWork.post<any, any>('/stock/out/otherMtlOuts', selectTable3List.value)
    if (res.code === 200) {
      JMessage.success('插入成功')
    } else {
      JMessage.warning(res.message)
    }
    dialogTableVisible.value = false
    getTableList()
  }
  if (content === '库存 > 0') {
    isLoading3.value = true
    let tableDataList = await service.post<any, any>('/stock/out/chooseMtlOtherList', {
      choose: 1,
      mtlColor: '',
      mtlName1: formList3.value.find(
        (item: any) => item.inputPlaceholder && Jzhcn.Find[item.inputPlaceholder.split('.')[1] as keyof typeof Jzhcn.Find] === '请输入名称1'
      )?.inputValue,
      mtlName2: formList3.value.find(
        (item: any) => item.inputPlaceholder && Jzhcn.Find[item.inputPlaceholder.split('.')[1] as keyof typeof Jzhcn.Find] === '请输入名称2'
      )?.inputValue,
      mtlName3: formList3.value.find(
        (item: any) => item.inputPlaceholder && Jzhcn.Find[item.inputPlaceholder.split('.')[1] as keyof typeof Jzhcn.Find] === '请输入名称3'
      )?.inputValue,
      mtlSpec: formList3.value.find(
        (item: any) => item.inputPlaceholder && Jzhcn.Find[item.inputPlaceholder.split('.')[1] as keyof typeof Jzhcn.Find] === '请输入规格'
      )?.inputValue,
      mtlUnit: formList3.value.find(
        (item: any) => item.inputPlaceholder && Jzhcn.Find[item.inputPlaceholder.split('.')[1] as keyof typeof Jzhcn.Find] === '请输入单位'
      )?.inputValue,
      type: DepartmentName.value,
      pageNum: currentPage3.value,
      pageSize: pageSize3.value
    })
    isLoading3.value = false
    tableData3.value = tableDataList.list
    total3.value = tableDataList.total
  }
}
const tableData3 = ref([])
const isLoading3 = ref(true)
// 分页器
const currentPage3 = ref(1)
const pageSize3 = ref(40)
const total3 = ref(0)
const handleSizeChange3 = (val: number) => {
  pageSize3.value = val
  getTableList3()
}
const handleCurrentChange3 = (val: number) => {
  currentPage3.value = val
  getTableList3()
}
// 获取表数据
const getTableList3 = debounce(async () => {
  isLoading3.value = true
  let tableDataList = await service.post<any, any>('/stock/out/chooseMtlOtherList', {
    choose: '',
    mtlColor: '',
    mtlName1: formList3.value.find(
      (item: any) => item.inputPlaceholder && Jzhcn.Find[item.inputPlaceholder.split('.')[1] as keyof typeof Jzhcn.Find] === '请输入名称1'
    )?.inputValue,
    mtlName2: formList3.value.find(
      (item: any) => item.inputPlaceholder && Jzhcn.Find[item.inputPlaceholder.split('.')[1] as keyof typeof Jzhcn.Find] === '请输入名称2'
    )?.inputValue,
    mtlName3: formList3.value.find(
      (item: any) => item.inputPlaceholder && Jzhcn.Find[item.inputPlaceholder.split('.')[1] as keyof typeof Jzhcn.Find] === '请输入名称3'
    )?.inputValue,
    mtlSpec: formList3.value.find(
      (item: any) => item.inputPlaceholder && Jzhcn.Find[item.inputPlaceholder.split('.')[1] as keyof typeof Jzhcn.Find] === '请输入规格'
    )?.inputValue,
    mtlUnit: formList3.value.find(
      (item: any) => item.inputPlaceholder && Jzhcn.Find[item.inputPlaceholder.split('.')[1] as keyof typeof Jzhcn.Find] === '请输入单位'
    )?.inputValue,
    type: DepartmentName.value,
    pageNum: currentPage3.value,
    pageSize: pageSize3.value
  })

  isLoading3.value = false
  tableData3.value = tableDataList.list
  total3.value = tableDataList.total
}, 500)
onMounted(() => {
  getTableList3()
})
watch(formList3.value, () => {
  getTableList3()
})

onBeforeUnmount(async () => {
  await service.post('/stock/other/deleteByTemp')
})
</script>

<style lang="less" scoped>
:deep(.el-tree-node:focus > .el-tree-node__content) {
  color: #f89027;
}

:deep(.el-tree-node__content:hover) {
  color: #f89027;
}

:deep(.is-expanded > .el-tree-node__content > .el-tree-node__expand-icon) {
  color: red !important;
}

.table1 {
  :deep(th:nth-child(1)) {
    color: #0000ff !important;
  }

  :deep(th:nth-child(11)) {
    color: red !important;
  }
}

:deep(.el-date-editor.el-input) {
  height: 100% !important;
  width: 140px;
}
</style>
